<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全威胁解析 - SQL注入与CSRF攻击</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.8;
            color: #333;
            background-color: #f8fafc;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            font-family: 'Courier New', monospace;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, #64748b, transparent);
            margin: 3rem 0;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.8;
            margin: 0.2em 0.1em 0 0;
            color: #1e40af;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">
                        网络安全威胁解析
                    </h1>
                    <p class="text-xl text-blue-100 mb-8">
                        深入理解SQL注入与CSRF攻击的原理、示例及防御措施
                    </p>
                    <div class="flex items-center">
                        <span class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold mr-3">
                            <i class="fas fa-shield-alt mr-1"></i> 安全防御
                        </span>
                        <span class="inline-block bg-blue-400 rounded-full px-3 py-1 text-sm font-semibold">
                            <i class="fas fa-code mr-1"></i> 开发实践
                        </span>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-blur-sm border border-white border-opacity-20">
                        <div class="mermaid">
                            flowchart TD
                            A[网络安全威胁] --> B[SQL注入攻击]
                            A --> C[CSRF攻击]
                            B --> D[认证绕过]
                            B --> E[数据泄露]
                            B --> F[数据篡改]
                            C --> G[账户劫持]
                            C --> H[资金转移]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-5xl px-4 py-12">
        <!-- SQL Injection Section -->
        <section>
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                    <i class="fas fa-database text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">SQL 注入攻击</h2>
            </div>
            
            <p class="text-lg text-gray-700 mb-6 drop-cap">
                SQL 注入攻击是一种通过将恶意 SQL 代码插入到应用程序的输入字段或查询字符串中，来操控数据库执行未授权的 SQL 查询的攻击方法。攻击者可以利用 SQL 注入漏洞来绕过身份验证、读取、修改或删除数据库中的数据，甚至执行系统命令。
            </p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                        <i class="fas fa-bug mr-2"></i> 工作原理
                    </h3>
                    <ol class="list-decimal pl-5 space-y-2 text-gray-700">
                        <li><strong>输入注入：</strong>攻击者通过输入字段（如登录表单、搜索框）注入恶意的 SQL 代码。</li>
                        <li><strong>SQL 拼接：</strong>应用程序将用户输入的内容直接拼接到 SQL 查询中。</li>
                        <li><strong>恶意执行：</strong>如果应用程序未对输入进行适当的处理和转义，攻击者的 SQL 代码将被执行。</li>
                    </ol>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-red-600 flex items-center">
                        <i class="fas fa-exclamation-triangle mr-2"></i> 常见攻击示例
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li><strong>认证绕过：</strong>通过注入 <code class="bg-gray-100 px-1 rounded">' OR '1'='1</code> 绕过登录验证</li>
                        <li><strong>数据泄露：</strong>通过注入 <code class="bg-gray-100 px-1 rounded">'; SELECT * FROM sensitive_data; --</code> 查询敏感数据</li>
                        <li><strong>数据篡改：</strong>通过注入 <code class="bg-gray-100 px-1 rounded">'; UPDATE users SET role = 'admin'; --</code> 提升权限</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="text-2xl font-semibold mb-4 text-green-600 flex items-center">
                <i class="fas fa-shield-alt mr-2"></i> 防御措施
            </h3>
            
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="bg-green-50 p-6 rounded-lg border border-green-100">
                    <div class="text-green-600 mb-3">
                        <i class="fas fa-code text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">参数化查询</h4>
                    <p class="text-gray-700 text-sm">避免直接拼接 SQL 语句，使用预编译的 SQL 语句和参数化查询。</p>
                    <div class="mt-4 code-block text-sm p-3 overflow-x-auto">
                        <pre>PreparedStatement ps = connection.prepareStatement(
    "SELECT * FROM users WHERE username = ? AND password = ?"
);
ps.setString(1, username);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();</pre>
                    </div>
                </div>
                
                <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
                    <div class="text-blue-600 mb-3">
                        <i class="fas fa-filter text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">输入验证与清理</h4>
                    <p class="text-gray-700 text-sm">对用户输入进行严格的验证和清理，避免接受和执行非法的输入。</p>
                </div>
                
                <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
                    <div class="text-purple-600 mb-3">
                        <i class="fas fa-lock text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">最小权限原则</h4>
                    <p class="text-gray-700 text-sm">数据库账户应具有最小权限，只能执行必要的操作。</p>
                </div>
            </div>
        </section>
        
        <div class="section-divider"></div>
        
        <!-- CSRF Section -->
        <section>
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                    <i class="fas fa-user-secret text-purple-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">CSRF 攻击</h2>
            </div>
            
            <p class="text-lg text-gray-700 mb-6 drop-cap">
                CSRF 攻击是一种欺骗用户的攻击方式，通过伪造用户的请求来诱使用户执行他们未授权的操作。攻击者利用用户的身份认证信息（如 Cookie）在用户不知情的情况下发起恶意请求，从而执行未授权的操作。
            </p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                        <i class="fas fa-project-diagram mr-2"></i> 工作原理
                    </h3>
                    <ol class="list-decimal pl-5 space-y-2 text-gray-700">
                        <li><strong>请求伪造：</strong>攻击者创建恶意网页或邮件，包含伪造的请求。</li>
                        <li><strong>恶意操作：</strong>受害者在登录状态下访问恶意内容时，伪造请求被执行。</li>
                    </ol>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-red-600 flex items-center">
                        <i class="fas fa-bolt mr-2"></i> 攻击示例
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li><strong>账户修改：</strong>更改用户账户的电子邮件地址或密码</li>
                        <li><strong>资金转移：</strong>在金融应用中伪造资金转账请求</li>
                    </ul>
                </div>
            </div>
            
            <h3 class="text-2xl font-semibold mb-4 text-green-600 flex items-center">
                <i class="fas fa-lock mr-2"></i> 防御措施
            </h3>
            
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="bg-yellow-50 p-6 rounded-lg border border-yellow-100">
                    <div class="text-yellow-600 mb-3">
                        <i class="fas fa-key text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">CSRF Token</h4>
                    <p class="text-gray-700 text-sm">在表单和敏感操作中使用 CSRF Token，服务器验证其有效性。</p>
                    <div class="mt-4 bg-gray-100 text-sm p-3 rounded overflow-x-auto">
                        <pre>&lt;input type="hidden" name="csrf_token" value="unique_token_value"&gt;</pre>
                    </div>
                </div>
                
                <div class="bg-orange-50 p-6 rounded-lg border border-orange-100">
                    <div class="text-orange-600 mb-3">
                        <i class="fas fa-globe text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">验证 Referer 头</h4>
                    <p class="text-gray-700 text-sm">检查请求的 Referer 头，确保来自受信任的来源。</p>
                </div>
                
                <div class="bg-red-50 p-6 rounded-lg border border-red-100">
                    <div class="text-red-600 mb-3">
                        <i class="fas fa-cookie text-2xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">SameSite Cookie</h4>
                    <p class="text-gray-700 text-sm">设置 Cookie 的 SameSite 属性为 Strict 或 Lax。</p>
                    <div class="mt-4 bg-gray-100 text-sm p-3 rounded overflow-x-auto">
                        <pre>Set-Cookie: sessionId=abcd1234; SameSite=Strict</pre>
                    </div>
                </div>
            </div>
            
            <!-- Comparison Section -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-indigo-600 text-white px-6 py-3">
                    <h3 class="text-xl font-semibold flex items-center">
                        <i class="fas fa-balance-scale mr-2"></i> SQL注入 vs CSRF 对比
                    </h3>
                </div>
                <div class="p-6">
                    <div class="mermaid">
                        gantt
                            title 攻击特征对比
                            dateFormat  X
                            axisFormat %s
                            
                            section SQL注入
                            数据库操作 : 0, 5
                            需要输入点 : 2, 8
                            直接攻击服务器 : 0, 10
                            
                            section CSRF
                            用户操作劫持 : 3, 8
                            利用用户身份 : 5, 10
                            需要用户登录 : 0, 10
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            gantt: {
                barHeight: 20,
                fontSize: 12
            }
        });
    </script>
</body>
</html>